<template>
    <div @mouseenter="enter" @mouseleave="enter">
        <div class="round-btn-container">
            <img :src="getIcon(isHover)">
        </div>
        <div class="text">
            {{name}}
        </div>
    </div>

</template>

<script>
import {ref} from "vue";

export default {
    name: "roundBtn",
    props:['name'],
    setup(props) {
        let isHover = ref(false)

        function enter() {
            isHover.value = !isHover.value
        }

        function getIcon(hover) {
            if (hover === true) {
                return new URL(`../../../../assets/main/findMusic/topper/${props.name + 'Hover'}.png`, import.meta.url).href
            } else {
                return new URL(`../../../../assets/main/findMusic/topper/${props.name}.png`, import.meta.url).href
            }
        }

        return {
            isHover,
            getIcon,
            enter
        }
    }
}
</script>

<style scoped>

.round-btn-container {
    border: red 3px solid;
    background-color: white;
    width: 64px;
    height: 64px;
    border-radius: 34px;
    transition: all 300ms ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.round-btn-container:hover {
    background-color: red;
    box-shadow: 0 0 4px #b26f6f;
}

.round-btn-container img {
    width: 40px;
    height: 40px;
}

.text {
    width: 70px;
    height: 40px;
    font-size: 17px;
    color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>